<template>
    <div class="input-yanzheng">
        <i :class="icon" class="ifont"></i>
        <input :value="value" @input="$emit('input',$event.target.value)" type="text" :placeholder="text">
        <button class="btn" v-if="!disabled" @click="send()">点击发送</button>
        <button class="btn" v-if="disabled" style="background-color:#aaaaaa;">点击发送</button>
    </div>
</template>

<script>
export default {
  name: "inputyanzheng",
  props: ["icon", "text","value"],
  data() {
    return {
      disabled: false
    };
  },
  methods: {
    send() {
      this.disabled = true;
      this.$toast("已发送！");
    }
  }
};
</script>

<style scoped>
.input-yanzheng {
  width: 65%;
  height: 2rem;
  background-color: #f5f5f5;
  /* background-color: red; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #808080;
  margin-bottom: 1rem;
}
.input-yanzheng .ifont {
  font-size: 1.5rem;
  line-height: 2rem;
  width: 3rem;
  text-align: center;
  color: #fb7d3f;
}
.input-yanzheng input {
  border: 0;
  height: 2rem;
  background-color: #f5f5f5;
  width: 60%;
  font-size: 1rem;
}
.btn {
  background-color: #26a2ff;
  width: 5rem;
  border: 0;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.5rem;
  margin-right: 0.5rem;
}
</style>